@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-black:   0%   0%   0%;
  --color-white: 100% 100% 100%;

  /* day theme */
  --day-color-base: 100%  100%  100%;
  --day-color-100:   96%   96%   97%;
  --day-color-200:   91%   91%   92%;
  --day-color-300:   74%   75%   76%;
  --day-color-400:   57%   58%   61%;
  --day-color-500:   44%   46%   50%;
  --day-color-600:   22%   25%   29%;
  --day-color-700:    5%    9%   14%;
  --day-border-color: var(--day-color-200);

  /* sunset theme */
  --sunset-color-base:  96%   95%   92%;
  --sunset-color-100:   92%   91%   89%;
  --sunset-color-200:   87%   86%   84%;
  --sunset-color-300:   72%   71%   69%;
  --sunset-color-400:   56%   55%   53%;
  --sunset-color-500:   43%   43%   41%;
  --sunset-color-600:   23%   23%   22%;
  --sunset-color-700:   10%    9%    9%;
  --sunset-border-color: var(--sunset-color-200);

  /* dusk theme */
  --dusk-color-base:   15%   15%   15%;
  --dusk-color-100:    18%   18%   18%;
  --dusk-color-200:    21%   21%   21%;
  --dusk-color-300:    30%   30%   30%;
  --dusk-color-400:    44%   44%   44%;
  --dusk-color-500:    55%   55%   55%;
  --dusk-color-600:    83%   83%   83%;
  --dusk-color-700:    96%   96%   96%;
  --dusk-border-color:  0%    0%    0%;

  /* midnight theme */
  --midnight-color-base:  0%    0%    0%;
  --midnight-color-100:   8%    8%    8%;
  --midnight-color-200:  14%   14%   14%;
  --midnight-color-300:  23%   23%   23%;
  --midnight-color-400:  35%   35%   35%;
  --midnight-color-500:  46%   46%   46%;
  --midnight-color-600:  73%   73%   73%;
  --midnight-color-700:  96%   96%   96%;
  --midnight-border-color: var(--midnight-color-200);

  /* accents */
  --color-blue-400:     38%   62%    93%;
  --color-blue-600:      3%   40%    89%;
  --color-blue-700:      3%   33%    73%;
  --color-green-600:     3%   67%    28%;
  --color-green-700:     2%   55%    23%;
  --color-red-200:      97%   91%    92%;
  --color-red-600:      73%    4%    18%;
  --color-orange-600:   91%   42%     5%;

  /* dark accents */
  --color-blue-600-dark-mode:   4%   45%  100%;
  --color-green-600-dark-mode:  3%   77%   32%;
  --color-red-600-dark-mode:   83%    5%   21%;
}

:root, .theme-day {
  --color-base:   var(--day-color-base);
  --color-100:    var(--day-color-100);
  --color-200:    var(--day-color-200);
  --color-300:    var(--day-color-300);
  --color-400:    var(--day-color-400);
  --color-500:    var(--day-color-500);
  --color-600:    var(--day-color-600);
  --color-700:    var(--day-color-700);
  --border-color: var(--day-border-color);
}

.theme-sunset {
  --color-base:   var(--sunset-color-base);
  --color-100:    var(--sunset-color-100);
  --color-200:    var(--sunset-color-200);
  --color-300:    var(--sunset-color-300);
  --color-400:    var(--sunset-color-400);
  --color-500:    var(--sunset-color-500);
  --color-600:    var(--sunset-color-600);
  --color-700:    var(--sunset-color-700);
  --border-color: var(--sunset-border-color);
}

.theme-dusk {
  --color-base:   var(--dusk-color-base);
  --color-100:    var(--dusk-color-100);
  --color-200:    var(--dusk-color-200);
  --color-300:    var(--dusk-color-300);
  --color-400:    var(--dusk-color-400);
  --color-500:    var(--dusk-color-500);
  --color-600:    var(--dusk-color-600);
  --color-700:    var(--dusk-color-700);
  --border-color: var(--dusk-border-color);
}

.theme-midnight {
  --color-base:   var(--midnight-color-base);
  --color-100:    var(--midnight-color-100);
  --color-200:    var(--midnight-color-200);
  --color-300:    var(--midnight-color-300);
  --color-400:    var(--midnight-color-400);
  --color-500:    var(--midnight-color-500);
  --color-600:    var(--midnight-color-600);
  --color-700:    var(--midnight-color-700);
  --border-color: var(--midnight-border-color);
}

:root, .theme-day, .theme-sunset {
  --color-light-100:  var(--color-100);
  --color-sidebar:    var(--color-100);
  --color-link:       var(--color-blue-600);
  --color-shadow-100: rgb(var(--color-black) / 0.1);
}

.theme-dusk, .theme-midnight {
  --color-light-100:  var(--color-600);
  --color-sidebar:    var(--color-base);
  --color-link:       var(--color-white);
  --color-shadow-100: rgb(var(--color-black) /0.5);

  --color-blue-600:  var(--color-blue-600-dark-mode);
  --color-green-600: var(--color-green-600-dark-mode);
  --color-red-600:   var(--color-red-600-dark-mode);
}

/*
this needs to be copied from both prefers-dark to prevent
a flash of the default theme before prefers-dark class is applied
*/
@media (prefers-color-scheme: dark) {
  .theme-auto {
    --color-base:   var(--dusk-color-base);
    --color-100:    var(--dusk-color-100);
    --color-200:    var(--dusk-color-200);
    --color-300:    var(--dusk-color-300);
    --color-400:    var(--dusk-color-400);
    --color-500:    var(--dusk-color-500);
    --color-600:    var(--dusk-color-600);
    --color-700:    var(--dusk-color-700);
    --border-color: var(--dusk-border-color);

    --color-light-100:  var(--color-600);
    --color-sidebar:    var(--color-base);
    --color-link:       var(--color-white);
    --color-shadow-100: rgb(var(--color-black) / 0.5);

    --color-blue-600:  var(--color-blue-600-dark-mode);
    --color-green-600: var(--color-green-600-dark-mode);
    --color-red-600:   var(--color-red-600-dark-mode);
  }
}

.StripeElement--focus {
  @apply border-blue-600 shadow-selected
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

:focus {
  outline-color: transparent;
  outline-style: none;
}

.pagination {
  @apply flex;
}

.pagination span, .pagination em, .pagination a {
  @apply leading-[42px] !text-600 hover:no-underline hover:text-600;
}

.pagination .disabled, .pagination .gap {
  @apply !text-500;
}

.pagination em, .pagination a:not(.next_page, .previous_page), .pagination .gap {
  @apply border border-400 border-l-0 px-3 not-italic min-w-[44px] text-center;
}

.pagination [aria-label]:nth-child(2) {
  @apply border-l rounded-l-md border-l-400;
}

.pagination [aria-label]:nth-last-child(2) {
  @apply rounded-r-md;
}

.pagination .current {
  @apply bg-100;
}

.pagination .previous_page {
  @apply mr-auto;
}

.pagination .next_page {
  @apply ml-auto;
}

@layer base {
  *,
  ::before,
  ::after {
    border-width: 0;
    border-style: solid;
    border-color: theme("borderColor.DEFAULT", currentColor);
  }
  ul, li, h6, p {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  input[type=radio], input[type=checkbox] {
    @apply sr-only;
  }
  .input-container {
    @apply py-0 px-2 rounded-md border border-400 transition-[border,box_shadow] duration-200 shadow-one
           has-[[disabled]]:border-200 has-[[disabled]]:shadow-none has-[[disabled]]:bg-100;
  }
  .input-container-focus {
    @apply text-700 border-blue-600 shadow-selected;
  }
  .input {
    @apply leading-[42px] bg-transparent w-full text-sm text-600 ring-base block grow appearance-none
    placeholder:text-500
    disabled:bg-100 disabled:text-500
    data-[focused]:text-700 data-[focused]:border-blue-600 data-[focused]:shadow-selected;
  }
  .select-wrap,
  .text-input-next {
    @apply input-container;
  }
  textarea,
  select,
  .text-input-next input {
    @apply input;
  }
  .select-wrap:focus-within,
  .text-input-next:focus-within {
    @apply input-container-focus;
  }
  .text-input-next:has(textarea) {
    @apply p-[4px];
  }
  textarea {
    @apply leading-normal p-1 min-h-[32px];
  }
  .text-input-next {
    @apply data-[accessories~=leading]:!pl-0 data-[accessories~=leading]:!pr-0;
  }
  .select-wrap {
    @apply p-0;
  }
  .select-wrap select {
    @apply px-2;
  }
  .select-wrap:has(select[disabled]) {

  }
  select {
    @apply text-700;
  }
  select option {
    @apply bg-base text-700;
  }
  button {
    tap-highlight-color: rgb(var(--color-black) / 0));
  }
  .button, .button-secondary, .button-tertiary, .button-huge {
    @apply text-sm font-medium relative inline-flex items-center justify-center gap-2 border border-blue-600 whitespace-nowrap leading-[42px] px-6 rounded-md !text-white bg-blue-600 transition transition-[box_shadow]
           disabled:bg-100 disabled:!text-400 disabled:border-100;
  }
  .button, .button-secondary, .button-tertiary, .button-huge, .focus-border {
    @apply relative before:content-[""] before:opacity-0 before:block before:border-2 before:border-blue-400 before:absolute before:pointer-events-none before:top-[-4px] before:right-[-4px] before:bottom-[-4px] before:left-[-4px] before:rounded-[8px] before:transition before:duration-200
           focus:before:opacity-100 data-[focused]:before:opacity-100 [-webkit-tap-highlight-color:transparent];
  }
  .button:hover, .button-secondary:hover {
    @apply shadow-one no-underline disabled:shadow-none;
  }
  .button:active, .button-secondary:active {
    @apply shadow-none bg-blue-700 border-blue-700 scale-[0.99] disabled:!bg-100 disabled:!border-100 disabled:!scale-100;
  }

  .button-secondary {
    @apply border border-400 bg-transparent !text-700;
  }
  .button-secondary:active, .button-huge:active  {
    @apply bg-100 border-400;
  }
  .button-tertiary {
    @apply border-transparent bg-transparent !text-700 px-0;
  }
  .button-tertiary:hover {
    @apply shadow-none;
  }
  .button-tertiary:active  {
    @apply bg-transparent border-transparent;
  }
  .button-huge {
    @apply border border-400 border-dashed bg-transparent !text-700 w-full;
  }
  .button-wide {
    @apply w-full;
  }
  .button-text {
    @apply !no-underline;
  }
  .dialog-button-primary {
    @apply button max-sm:button-wide sm:ml-auto;
  }
  .dialog-button-secondary {
    @apply !text-600 max-sm:button-secondary max-sm:button-wide sm:button-text;
  }
  .one-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .two-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@layer utilities {
  .border-shim {
    border: 0px solid black;
  }
  .tw-hidden {
    display: none;
  }
  .hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .input-shadow {
    box-shadow: 0 1px 1px 0 rgb(var(--color-black) / 0.1), 0 1px 1px 0 transparent;
  }
  .flex-center {
    @apply items-center justify-center;
  }
  .items-last-baseline {
    align-items: last baseline;
  }
}
